// 柱形图模块左
(function () {
  // 实例化对象
  var myChart = echarts.init(document.getElementById('bar1'));
  // 配置项和数据
  var option = {
    title: {
        left: 'center',
      top: '3%',
        textStyle: {
            fontSize: 20,
            color:'#fff',
        },
    text: '新增确诊国家top10'
  },
  grid: {
    left: '1%',
    right: '3%',
    bottom: '3%',
    containLabel: true
  },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      backgroundColor: '#4c4cdf',
  },
    xAxis: {
        axisLabel: {
            color: "rgba(237, 231, 231, 1)"
      },
    type: 'category',
    data: [
      '美国',
      '英国',
      '俄罗斯',
      '土耳其',
      '乌克兰',
      '罗马尼亚',
      '巴西',
      '泰国',
      '伊朗',
      '塞尔维亚'
      ],
  },
  legend: {
    date: [
      '美国',
      '英国',
      '俄罗斯',
      '土耳其',
      '乌克兰',
      '罗马尼亚',
      '巴西',
      '泰国',
      '伊朗',
      '塞尔维亚'
    ]
  },
    yAxis: {
      axisLabel: {
        color: "rgba(237, 231, 231, 1)",
      },
      type: 'value',
      axisLine: {
        lineStyle: {
          color:'rgba(255, 255, 255, .1)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255, 255, .3 )'
        }
      }
  },
  series: [
    {
      data: [
        {
          value: 84115,
          
          itemStyle: {
            color: '#0000c6'
          },
        },
        {
          value: 44985,
          itemStyle: {
            color: '#0000E3'
          }
        },
        {
          value: 37678,
          itemStyle: {
            color: '#2828FF'
          }
        },
        {
          value: 28192,
          itemStyle: {
            color: '#4A4AFF'
          }
        },
        {
          value: 23229,
          itemStyle: {
            color: '#6A6AFF'
          }
        },
        {
          value: 15261,
          itemStyle: {
            color: '#7D7DFF'
          }
        },
        {
          value: 14502,
          itemStyle: {
            color: '	#9393FF'
          }
        },
        {
          value: 9742,
          itemStyle: {
            color: '	#AAAAFF'
          }
        },
        {
          value: 7081,
          itemStyle: {
            color: '#B9B9FF'
          }
        },
        {
          value: 6748,
          itemStyle: {
            color: '#CECEFF'
          }
        }
      ],
      type: 'bar',
      barWidth: '55%',
      itemStyle: {
        // 修改柱子圆角
        barBorderRadius:4
      }
    }
    
  ]
};
  // 实例化对象设置配置项和数据
  myChart.setOption(option);
  // 4.让图表随屏幕变化而变化
  window.addEventListener('resize', function () {
    myChart.resize();
  });
})();

// 柱形图模块右边
(function () {
  // 实例化对象
  var myChart =echarts.init(document.getElementById('bar2'));
  // 配置项和数据
  var mycolor=['#1089e7','f57474','#56d0e3','f8b448','#8b78f6']
option = {
  title: {
    text: '新冠确诊人数各国占比',
    textStyle: {
      fontSize: 20,
      color:'#fff',
  },
    left:'center',
    top:'3%'
  },
  // tooltip: {
  //   trigger: 'axis',
  //   axisPointer: {
  //     type: 'shadow'
  //   }
  // },
  // legend: {},
  grid: {
    top:'15%',
    left: '13%',
    right:'18%',
    bottom: '3%',
    containLabel: false
  },
  xAxis: {
    type: 'value',
    show:false
  },
  yAxis: [{
    type: 'category',
    axisLine:false,
    axisTick:false,
    axisLabel:{
      color:'#fff'
    },
    data: ['其他国家', '英国', '巴西', '印度','美国']
  },{
    axisLine:false,
    axisTick:false,
    axisLabel:{
      color:'#fff'
    },
    data: ['173654060人', '8809774人', '21735560人', '34202202人','46417525人']
  }
  ],
  
  series: [
    {
      name:'条',
      type: 'bar',
      yAxisIndex:0,
      barWidth:15,
      itemStyle:{
        barBorderRadius:20,
        color:function(params){
          return mycolor[params.dataIndex];
        }
      },
      // 柱子之间的距离
      barCategoryGap:50,
      // 显示柱子内的文字
      label:{
        show:true,
        position:'inside',
        formatter:'{c}%'
      },
      data: [13, 7, 16, 28, 36]
    },
    {
      name:'框',
      type: 'bar',
      yAxisIndex:1,
      barCategoryGap:50,
      itemStyle:{
        color:'none',
        borderColor:'#00c1de',
        borderWidth:3,
        barBorderRadius:15
      },
      barWidth:15,
      data: [100, 100, 100, 100, 100]
    }
  ]
};
  // 对实例化对象设置配置项和数据
  myChart.setOption(option);
  // 让图表随屏幕变化而变化
  window.addEventListener('resize', function () {
    myChart.resize();
  })
})();

// 曲线图模块左
(function () {
  // 实例化对象
  var myChart = echarts.init(document.getElementById('curve1'));
  // 配置项和数据
  var option = {
    title: {
          top: '3%',
        left:'center',
      text: '亚洲多国新增确诊',
      textStyle: {
        fontSize: 20,
        color: '#fff'
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    // 网格大小位置
    grid: {
      left: '3%',
      right: '3%',
      bottom: '6%',
      containLabel: true
    },
    xAxis: {
      axisLabel: {
        color: 'rgba(237, 231, 231, 1)' 
      },
      type: 'category',
      boundaryGap: false,
      data: [
        '7.29',
        '8.4',
        '8.9',
        '8.14',
        '8.19',
        '8.24',
        '8.29',
        '9.3',
        '9.8',
        '9.13',
        '9.18',
        '9.23',
        '9.28',
        '10.1',
        '10.6',
        '10.11',
        '10.16',
        '10.21'
      ]
    },
    yAxis: {
      axisLabel: {
        color: 'rgba(237, 231, 231, 1)'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255, 255, .3 )'
        }
      },
      type: 'value'
    },
    series: [
      {
        name: '印度',
        type: 'line',
        smooth: true,
        color: '	#0072E3',
        data: [
          21013, 53580, 19260, 78476, 26271, 36147, 11756, 55687, 24875, 66591,
          17554, 45668, 16167, 66486, 39752, 16598, 66484, 35645
        ]
      },
      {
        name: '伊朗',
        type: 'line',
        smooth: true,
        color: '	#0080FF',
        data: [
          11013, 73580, 65260, 76446, 47271, 36147, 33756, 45687, 66675, 71551,
          48486, 78476, 36271, 56147, 71756, 55687, 46486, 48648
        ]
      },
      {
        name: '沙特阿拉伯',
        type: 'line',
        smooth: true,
        color: '	#2894FF',
        data: [
          56446, 47271, 56147, 43756, 55687, 46675, 61551, 53580, 49260, 58476,
          46271, 66147, 51756, 49260, 38476, 56271, 36147, 21756
        ]
      },
      {
        name: '孟加拉国',
        type: 'line',
        smooth: true,
        color: '	#46A3FF',
        data: [
          31013, 33580, 39260, 38476, 36271, 36147, 31756, 36687, 32875, 35260,
          33476, 34271, 36147, 31756, 39260, 29447, 39260, 38476
        ]
      },
      {
        name: '巴基斯坦',
        type: 'line',
        smooth: true,
        color: '	#66B3FF',
        data: [
          21013, 13580, 16260, 14476, 14271, 12147, 17756, 15683, 14875, 18591,
          13580, 19260, 18476, 16271, 11147, 16972, 13324, 14425
        ]
      }
    ]
  };
  // 给对象设置配置项
  myChart.setOption(option);
  // 让图表随屏幕变化而变化
  window.addEventListener('resize', function () {
    myChart.resize();
  });
})();

// 曲线图模块右
(function () {
  // 实例化对象
  var myChart = echarts.init(document.getElementById('curve2'))
  // 配置项和数据
  var option = {
    title: {
      top: '10%',
        left:'center',
      text: '美洲多国确诊人数变化趋势',
      textStyle: {
        fontSize: 20,
        color: '#fff'
      }
    },
    tooltip: {
      trigger: 'axis'

    },
    legend: {
      top: "0%",
      textStyle: { //图例文字的样式
        color: '#fff',
        fontSize: 12
    },
},
    grid: {
      top:'20%',
      left: '5%',
      right: '6%',
      bottom: '6%',
      containLabel: true
    },
    xAxis: {
      axisLabel: {
        color: "rgba(237, 231, 231, 1)"
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)"
        }
      },
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '七月','8月','9月','10月']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: "rgba(237, 231, 231, 1)"
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)"
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255, 255, .3 )'
        }
      }
    },
    series: [
      {
        name: '美国',
        type: 'line',
        smooth:true,
        lineStyle:{
          color:'	#00CACA'
        },
        areaStyle: {
          // 渐变色，只需要复制即可
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
            },
            {
              offset: 0.8,
              color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
            }
          ],
          false
        ),
        shadowColor: "rgba(0, 0, 0, 0.1)"
        },
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 4,
        // 设置拐点颜色以及边框
        itemStyle: {
            color: "#00FFFF",
            borderColor: "rgba(127 ,255 ,212 .3)",
            borderWidth: 1
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
        data: [96705, 26529, 115438, 144461, 70266, 24123, 115516,142576,70119,171457]
      },
      {
        name: '巴西',
        type: 'line',
        smooth:true,
        lineStyle:{
          color:'	#02F78E'
        },
        areaStyle: {
          // 渐变色，只需要复制即可
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(	152 ,251, 152, 0.4)"   // 渐变色的起始颜色
            },
            {
              offset: 0.8,
              color: "rgba(186 ,85, 211, 0.1)"   // 渐变线的结束颜色
            }
          ],
          false
        ),
        shadowColor: "rgba(0, 0, 0, 0.1)"
        },
         // 设置拐点 小圆点
         symbol: "circle",
         // 拐点大小
         symbolSize: 4,
         // 设置拐点颜色以及边框
         itemStyle: {
             color: "#00EE00",
             borderColor: "rgba(127 ,255 ,212 .3)",
             borderWidth: 1
         },
         // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
         
        data: [48443, 37582, 32572, 40054, 13893, 35245, 13597,41017,28388,13103]
      },
      {
        name: '加拿大',
        type: 'line',
        smooth:true,
        lineStyle:{
          color:'	#9F35FF'
        },
        areaStyle: {
          // 渐变色，只需要复制即可
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(	0 ,255 ,127,0.4)"   // 渐变色的起始颜色
            },
            {
              offset: 0.8,
              color: "rgba(	152 ,251 ,152,0.1)"   // 渐变线的结束颜色
            }
          ],
          false
        ),
        shadowColor: "rgba(0, 0, 0, 0.1)"
        },
         // 设置拐点 小圆点
         symbol: "circle",
         // 拐点大小
         symbolSize: 4,
         // 设置拐点颜色以及边框
         itemStyle: {
             color: "#E066FF",
             borderColor: "rgba(127 ,255 ,212 .3)",
             borderWidth: 1
         },
         // 开始不显示拐点， 鼠标经过显示
         showSymbol: false,
        data: [896, 279, 1445, 1898, 562, 101, 780,2141,1217,3071]
      }
    ]
  };
  // 图表随屏幕变化而变化
  window.addEventListener('resize', function () {
    myChart.resize();
  });
  // 实例化对象设置配置项和数据
  myChart.setOption(option)
})();

// 饼状图模块左
(function () {
  // 实例化对象
  var myChart = echarts.init(document.getElementById('poly1'))
  // 配置项和数据
  option = {
    title: {
      top: '3%',
      left: 'center',
      text: '美洲多国确诊人数变化趋势',
      textStyle: {
        fontSize: 20,
        color: '#fff'
      }
    },
    color: [
      "#4A4AFF",
      "#0000C6",
      "#4A4AFF",
      "#9393FF",
      "#CECEFF",
    ],
    tooltip: {
      trigger: 'item',
      formatter: '{b}占各州比重：{c}%'
    },
    legend: {
      bottom: '2%',
      left: 'center',
      textStyle: { //图例文字的样式
        color: '#fff',
        fontSize: 12
      },
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['45%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 45, name: '北美洲' },
          { value: 30, name: '欧洲' },
          { value: 13, name: '南美洲' },
          { value: 7, name: '大洋洲' },
          { value: 5, name: '亚洲' }
        ]
      }
    ]
  };
  // 实例化对象设置配置项和数据
  myChart.setOption(option);
  // 图表随屏幕变化而变化
  window.addEventListener('resize', function () {
    myChart.resize();
  })
})();

// 饼状图右
(function () {
  // 实例化对象
  var myChart = echarts.init(document.getElementById('pia'))
  // 配置项和数据
  option = {
    color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
    // title: {
    //     text: '国外疫情死亡人数top5',
    //     left: '60',
    //     top: 0,
    //     textAlign: 'center',
    //     textStyle: {
    //         color: '#fff',
    //         fontSize: 14,
    //         fontWeight: 0
    //     }
    // },
    grid: {
        left: -100,
        top: 50,
        bottom: 10,
        right: 10,
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        formatter: "{b} : {c} ({d}%)"
    },
    legend: {
        type: "scroll",
        orient: "vartical",
        // x: "right",
        top: "center",
        right: "15",
        // bottom: "0%",
        itemWidth: 16,
        itemHeight: 8,
        itemGap: 16,
        textStyle: {
            color: '#A3E2F4',
            fontSize: 12,
            fontWeight: 0
        },
        data: ['美国', '印度', '巴西', '英国', '俄罗斯', '土耳其']
    },
    polar: {},
    angleAxis: {
        interval: 1,
        type: 'category',
        data: [],
        z: 10,
        axisLine: {
            show: false,
            lineStyle: {
                color: "#0B4A6B",
                width: 1,
                type: "solid"
            },
        },
        axisLabel: {
            interval: 0,
            show: true,
            color: "#0B4A6B",
            margin: 8,
            fontSize: 16
        },
    },
    radiusAxis: {
        min: 40,
        max: 120,
        interval: 20,
        axisLine: {
            show: false,
            lineStyle: {
                color: "#0B3E5E",
                width: 1,
                type: "solid"
            },
        },
        axisLabel: {
            formatter: '{value} %',
            show: false,
            padding: [0, 0, 20, 0],
            color: "#0B3E5E",
            fontSize: 16
        },
        splitLine: {
            lineStyle: {
                color: "#0B3E5E",
                width: 2,
                type: "solid"
            }
        }
    },
    calculable: true,
    series: [{
        type: 'pie',
        radius: ["5%", "10%"],
        hoverAnimation: false,
        labelLine: {
            normal: {
                show: false,
                length: 30,
                length2: 55
            },
            emphasis: {
                show: false
            }
        },
        data: [{
            name: '',
            value: 0,
            itemStyle: {
                normal: {
                    color: "#0B4A6B"
                }
            }
        }]
    }, {
        type: 'pie',
        radius: ["90%", "95%"],
        hoverAnimation: false,
        labelLine: {
            normal: {
                show: false,
                length: 30,
                length2: 55
            },
            emphasis: {
                show: false
            }
        },
        name: "",
        data: [{
            name: '',
            value: 0,
            itemStyle: {
                normal: {
                    color: "#0B4A6B"
                }
            }
        }]
    },{
        stack: 'a',
        type: 'pie',
        radius: ['20%', '80%'],
        roseType: 'area',
        zlevel:10,
        label: {
            normal: {
                show: true,
                formatter: "{c}",
                textStyle: {
                    fontSize: 12,
                },
                position: 'outside'
            },
            emphasis: {
                show: true
            }
        },
        labelLine: {
            normal: {
                show: true,
                length: 20,
                length2: 55
            },
            emphasis: {
                show: false
            }
        },
        data: [{
                value: 763784,
                name: '美国'
            },
            {
                value: 457221,
                name: '印度'
            },
            {
                value: 607125,
                name: '巴西'
            },
            {
                value: 236200,
                name: '俄罗斯'
            },
            {
                value: 140206,
                name: '英国'
            },
            {
                value: 125875,
                name: '伊朗'
            }
        ]
    }, ]
}
  // 实例化对象设置配置项和数据
  myChart.setOption(option);
  // 图表随屏幕变化而变化
  window.addEventListener('resize', function () {
    myChart.resize();
  })
})()

// 地图
  (function () {
   // 绘制图表
   let worldChart = echarts.init(document.getElementById('worldMap'));
   // 国家名英文中文对比
   let  nameComparison = {
       'Canada':'加拿大',
       'Russia':'俄罗斯',
       'China':'中国',
       'United States':'美国',
          // ....其他省略 ，见文章末
   };
   // 数据
   let dataMap = [
       {"name": "俄罗斯","value": 10},
       {"name": "加拿大","value": 0},
       {"name": "中国","value": 5},
       {"name": "美国","value": 7}
   ]
   let option = {
       backgroundColor: "#02AFDB",
       title: {    //地图显示标题
           show: false,
           text: '',
           top:"30px",
           left: 'center',
           textStyle: {color: '#000'}
       },
       visualMap: {   //图列显示柱
           type: 'piecewise',
           left:30,
           realtime: false,
           calculable : true,
           color: ['green', 'lightgreen','red'],
           pieces: [
               {gte: 10, label: '大于等于10'},            // (10, Infinity]
               {gte: 1, lte: 9, label: '小于10'},       // (1, 9]
               {lt: 1,  label: '未满足'}                 // (-Infinity, 1)
           ]
       },
       toolbox: {  //工具栏
           show: false,
           orient: 'vertical',
           top:50,
           itemGap:20,
           left:30,
           feature: {
               dataView: {readOnly: false},
               restore: {},
               saveAsImage: {}
           }
       },
       tooltip: {  //提示框组件
           show: true,
           trigger: 'item',
           formatter: ''
       },
       series: [{
           name:"使用情况",
           type: 'map',
           mapType: 'world',
           roam: true,
           zoom: 1,
           mapLocation: {y: 100},
           data: dataMap,   //绑定数据
           nameMap: nameComparison,
           symbolSize: 12,
           label: {
               normal: {show: false},
               emphasis: {show: true}
           },
           itemStyle: {
               emphasis: {
                   borderColor: 'transparent',
                   borderWidth: 1
               }
           }
       }],
   };
    worldChart.setOption(option);
    window.addEventListener('resize', function () {
      myChart.resize();
    })
})()
